<template>
  <v-scale-screen ref="screenWrapper" width="1920" height="1080">
    <dv-loading v-if="loading"></dv-loading>
    <div class="analysis-presentation" style="padding: 2rem 0; padding-top: 3rem">
      <el-row>
        <el-col :span="3">
          <el-button color="#0052ac" @click="downloadWordReport">
            <div class="mr-1"
              style="background-color: #fff; color: #0052ac; border-radius: 50%; width: 1rem; height: 1rem">
              <el-icon style="font-size: 0.7em">
                <Download />
              </el-icon>
            </div>
            生成报告
          </el-button>
        </el-col>

        <el-col :span="3" :push="18">
          <div
            style="font-size: 13px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: end; padding: 0px 7%">
            {{ localDate }}
          </div>
        </el-col>
      </el-row>
      <el-row style="height: 100%; width: 100%; padding-top: 1%">
        <el-col :span="6">
          <div
            style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 0 4%">
            <div class="flex-1 chart" style="width: 100%; height: 100%" @click="navTo('/overview')">
              <div class="chart-label">
                <p>土地概览</p>
              </div>
              <div class="chart-container" @click.stop="">
                <div class="chart-title">
                  <div>
                    总面积<span class="highlight">{{ lantotal || '0.00' }}</span>㎡
                  </div>
                </div>
                <div class="chart-content" style="display: flex; flex-direction: row">
                  <div ref="landUseChart" style="width: 50%; height: 110%" />
                  <div ref="landStatusChart" style="width: 50%; height: 110%" />
                </div>
              </div>
            </div>
            <div class="flex-1 chart" style="width: 100%; height: 100%" @click="navTo('/parkarea/foundationlnfo')">
              <div class="chart-label">
                <p>园区概览</p>
              </div>
              <div class="chart-container pt-17" @click.stop="">
                <div class="chart-title" style="top: 6%">
                  <div>
                    总建筑面积<span class="highlight">{{ parkData.area || '0.00' }}</span>㎡
                  </div>
                  <div>
                    当年租金收入<span class="highlight">{{ parkData.income || '0.00' }}</span>万元
                  </div>
                </div>
                <div class="chart-content">
                  <div ref="parkChart" style="width: 100%; height: 100%" />
                </div>
              </div>
            </div>
            <div class="flex-1 chart" style="width: 100%; height: 100%" @click="navTo('/flat/flatrentalInfo')">
              <div class="chart-label">
                <p>公寓出租率</p>
              </div>
              <div class="chart-container pt-17" @click.stop="">
                <div class="chart-content">
                  <div ref="flatChart" style="width: 100%; height: 100%" />
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div
            style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%">
            <div class="dbg-chart">
              <div
                style="width: 100%; display: flex; flex-direction: row; position: absolute; bottom: 0; left: 0; right: 0">
                <div v-for="(item, index) in overDate" :key="index" style="text-align: center; flex: 1">
                  <div class="mb-2">
                    <img id="u17_img" style="width: 1rem; height: 1rem" class="img" :src="item.icon" />
                  </div>
                  <div class="mb-2">{{ item.label }}</div>
                  <div class="mb-2">
                    <span class="highlight">{{ item.value || '0.00' }}</span>万元
                  </div>
                </div>
              </div>
              <div class="dbg-date">*估值更新日期：{{ valuationDate }}</div>
              <div class="dbg-chart-item">
                <div>土地数量</div>
                <div>
                  <text class="dbg-text">{{ asseetOvervieData.landAreaCount.totalCount || '0' }}</text>块
                </div>
                <div>总面积</div>
                <div>
                  <text class="dbg-text">{{ asseetOvervieData.landAreaCount.totalArea || '0.00' }}</text>亩
                </div>
              </div>
              <div class="dbg-chart-item1">
                <div>园区数量</div>
                <div>
                  <text class="dbg-text">{{ asseetOvervieData.parkareaCount.totalCount || '0' }}</text>个
                </div>
                <div>总建筑面积</div>
                <div>
                  <text class="dbg-text">{{ asseetOvervieData.parkareaCount.totalArea || '0.00' }}</text>万㎡
                </div>
              </div>
              <div class="dbg-chart-item2">
                <div>惠生活</div>
                <div>
                  <text class="dbg-text">{{ asseetOvervieData.lifeCount.totalCount || '0.00' }}</text>块
                </div>
                <div>门店当年销售额</div>
                <div>
                  <text class="dbg-text">{{ asseetOvervieData.lifeCount.totalIncome || '0.00' }}</text>万元
                </div>
              </div>
              <div class="dbg-chart-item3">
                <div>商户住宅数量</div>
                <div>
                  <text class="dbg-text">{{ asseetOvervieData.businessApartmentCount.totalCount || '0' }}</text>套
                </div>
                <div>总建筑面积</div>
                <div>
                  <text class="dbg-text">{{ asseetOvervieData.businessApartmentCount.totalArea || '0.00' }}</text>万㎡
                </div>
              </div>
              <div class="dbg-chart-item4">
                <div>公寓房间数量</div>
                <div>
                  <text class="dbg-text">{{ asseetOvervieData.apartmentAreaCount.totalCount || '0' }}</text>间
                </div>
                <div>总建筑面积</div>
                <div>
                  <text class="dbg-text">{{ asseetOvervieData.apartmentAreaCount.totalArea || '0.00' }}</text>万㎡
                </div>
              </div>
              <div class="dbg-chart-item5">
                <div>汽车数量</div>
                <div>
                  <text class="dbg-text">{{ carCount || '0' }}</text>辆
                </div>
              </div>
            </div>
            <div
              style="flex: 1; width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center">
              <div class="flex-1 chart" style="width: 100%; height: 100%; margin-right: 2%; overflow: hidden"
                @click="navTo('/houseproperty/housepropertylnformation')">
                <div class="chart-label">
                  <p>房产（其他）出租率</p>
                </div>
                <div class="chart-container pt-17" @click.stop="">
                  <div class="chart-content">
                    <div ref="houseChart" style="width: 100%; height: 100%" />
                  </div>
                </div>
              </div>
              <div class="flex-1 chart" style="width: 100%; height: 100%; overflow: hidden"
                @click="navTo('/parkarea/building')">
                <div class="chart-label">
                  <p>办公空间出租率</p>
                </div>
                <div class="chart-container pt-17" @click.stop="">
                  <div class="chart-content">
                    <div ref="officeChart" style="width: 100%; height: 100%" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div
            style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 0 4%">
            <div class="flex-1 chart" style="width: 100%; height: 100%"
              @click="navTo('/automobileoperation/carrentallnfo')">
              <div class="chart-label">
                <p>汽车运营</p>
              </div>
              <div class="chart-container" @click.stop="">
                <div class="chart-title">
                  <div>
                    车辆数<span class="highlight">{{ carCount || '0' }}</span>辆
                  </div>
                </div>
                <div class="chart-content" style="display: flex; flex-direction: row">
                  <div ref="carRentChart" style="width: 50%; height: 110%" />
                  <div ref="carBrandChart" style="width: 50%; height: 110%" />
                  <!-- <dv-charts :option="option" /> -->
                </div>
              </div>
            </div>
            <div class="flex-1 chart" style="width: 100%; height: 100%">
              <div class="chart-label">
                <p>惠生活</p>
              </div>
              <div class="chart-container" @click.stop="">
                <div class="chart-title">
                  <div>当年销售额<span class="highlight">0.00</span>万元</div>
                  <div>当月销售额<span class="highlight">0.00</span>万元</div>
                </div>
                <div class="chart-content">
                  <div ref="lifeChart" style="width: 100%; height: 100%" />
                </div>
              </div>
            </div>
            <div class="flex-1 chart" style="width: 100%; height: 100%">
              <div class="chart-label">
                <p>混凝土搅拌站</p>
              </div>
              <div class="chart-container pt-17" @click.stop="">
                <div class="chart-title" style="top: 6%">
                  <div>
                    当年累计供应量<span class="highlight">{{ totalSupply || '0.00' }}</span>m³
                  </div>
                  <div>
                    累计营业额<span class="highlight">{{ totalSales || '0.00' }}</span>万元
                  </div>
                </div>
                <div class="chart-content">
                  <div ref="plantChart" style="width: 100%; height: 100%" />
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </v-scale-screen>
</template>

<script setup lang="ts" name="AnalysisPresentation">
  import {
    totalLandArea,
    landUse,
    landRentDistribution,
    getRentalIncomeArea,
    getApartmentRentalRate,
    getPropertyRentalRate,
    getOfficeRentalRate,
    brandDistribution,
    rental,
    parkareaCount,
    overviewOfAssets,
    largAssetValuation,
    mixtureConcreteMixingStation,
    landAreaCount,
    businessApartmentCount,
    assetValuation,
    apartmentAreaCount
  } from '@/api/chart/index';
  import VScaleScreen from 'v-scale-screen';
  import { computed, ref } from 'vue';
  import * as echarts from 'echarts';
  import { asBlob } from 'html-docx-ts';
  import html2canvas from 'html2canvas';
  import ExcelJS from 'exceljs';
  import { saveAs } from 'file-saver';
  import asvg from '@/assets/icons/svg/201_u855.svg';
  import asvg1 from '@/assets/icons/svg/u151.svg';
  import asvg2 from '@/assets/icons/svg/u7117.svg';
  import asvg3 from '@/assets/icons/svg/u177-1.svg';
  import asvg4 from '@/assets/icons/svg/207_u186.svg';
  import asvg5 from '@/assets/icons/svg/u7231.svg';

  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const { land_use, land_ease_status } = toRefs<any>(proxy?.useDict('land_use', 'land_ease_status'));

  const landUseChart = ref(null);
  const landStatusChart = ref(null);
  const parkChart = ref(null);
  const flatChart = ref(null);
  const houseChart = ref(null);
  const officeChart = ref(null);
  const carRentChart = ref(null);
  const carBrandChart = ref(null);
  const lifeChart = ref(null);
  const plantChart = ref(null);

  const lantotal = ref();
  const screenWrapper = ref<any>();
  const valuationDate = ref('');
  const updateScale = () => {
    // 获取真实视口尺寸
    const currentWidth = document.body.clientWidth;
    const currentHeight = document.body.clientHeight;
    console.log('?? ~ updateScale ~ realWidth:', currentWidth);
    console.log('?? ~ updateScale ~ realHeight:', currentHeight);
  };

  const overDate = ref([
    {
      icon: asvg,
      label: '土地资产估值',
      value: ''
    },
    {
      icon: asvg1,
      label: '园区资产估值',
      value: ''
    },
    {
      icon: asvg2,
      label: '汽车资产估值',
      value: ''
    },
    {
      icon: asvg3,
      label: '房产(其他)估值',
      value: ''
    },
    {
      icon: asvg4,
      label: '公寓资产估值',
      value: ''
    },
    {
      icon: asvg5,
      label: '资产总估值',
      value: ''
    }
  ]);

  const router = useRouter();
  const asseetOvervieData = ref({
    parkareaCount: {
      totalCount: 0,
      totalArea: 0
    },
    landAreaCount: {
      totalCount: 0,
      totalArea: 0
    },
    businessApartmentCount: {
      totalCount: 0,
      totalArea: 0
    },
    apartmentAreaCount: {
      totalCount: 0,
      totalArea: 0
    },
    lifeCount: {
      totalCount: 0,
      totalArea: 0
    }
  });
  const asseetOvervie = () => {
    overviewOfAssets().then((res) => {
      asseetOvervieData.value.parkareaCount = res.data.parkOverview;
      asseetOvervieData.value.landAreaCount = res.data.landOverview;
      asseetOvervieData.value.businessApartmentCount = res.data.merchantHouseOverview;
      asseetOvervieData.value.apartmentAreaCount = res.data.apartmentOverview;
      carCount.value = Number(res.data.totalCarCount);
      asseetOvervieData.value.lifeCount.totalCount = Number(res.data.totalSales);
    });
    largAssetValuation().then((res) => {
      console.log(res);
      overDate.value[0].value = res.data.landValuation;
      overDate.value[1].value = res.data.parkValuation;
      overDate.value[2].value = res.data.carValuation;
      overDate.value[3].value = res.data.houseValuation;
      overDate.value[4].value = res.data.apartmentValuation;
      overDate.value[5].value = res.data.totalValuation;
      valuationDate.value = res.data.valuationDate;
    });
    // landAreaCount().then((res) => {
    //   asseetOvervieData.value.landAreaCount = res.data;
    // });
    // businessApartmentCount().then((res) => {
    //   asseetOvervieData.value.businessApartmentCount = res.data;
    // });
    assetValuation().then((res) => {
      overDate.value[0].value = res.data.landValuation;
      overDate.value[1].value = res.data.parkValuation;
      overDate.value[2].value = res.data.carValuation;
      overDate.value[3].value = res.data.houseValuation;
      overDate.value[4].value = res.data.apartmentValuation;
      overDate.value[5].value = res.data.totalValuation;
    });
    apartmentAreaCount().then((res) => {
      asseetOvervieData.value.apartmentAreaCount = res.data;
    });
  };

  const navTo = (path : string) => {
    router.push(path);
  };

  // 统一的饼图标签格式配置
  const pieChartLabelConfig = {
    show: true,
    minAngle: 5,           　　 //最小的扇区角度（0 ~ 360）
    avoidLabelOverlap: true,
    formatter: '{d}%', // 显示百分比
    rich: {
      color: '#fff',
      fontSize: 14,
      lineHeight: 26
    },
    textStyle: {
      color: '#fff',
      fontSize: 14
    }
  };

  const landUseChartInit = async () => {
    const landUseChartInstance = echarts.init(landUseChart.value, 'macarons', {
      renderer: 'svg'
    });
    const res = await landUse();
    console.log(res);
    // lantotal.value = response.data;
    lantotal.value = res.data.totalArea;
    const deData = [...res.data.landUseVOList];
    deData.map((item : any) => {
      land_use.value.map((item2 : any) => {
        if (item.name === item2.value) {
          item.name = item2.label;
        }
      });
    });
    landUseChartInstance.setOption({
      tooltip: {
        title: '土地分类',
        formatter: '{b}: {c} ㎡ ({d}%)',
        position: 'right'
      },
      legend: {
        orient: 'horizontal',
        top: 180,
        // icon: 'rect',
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      graphic: {
        type: 'text',
        left: 67,
        top: 'center',
        style: {
          text: '土地分类',
          textAlign: 'center',
          fill: '#fff',
          fontSize: 12
        }
      },
      series: [
        {
          type: 'pie',
          radius: ['28%', '48%'],
          center: ['44%', '50%'],
          avoidLabelOverlap: false,
          label: pieChartLabelConfig,
          labelLine: {
            show: true,
            length: 4,
            length2: 4,
            smooth: 0.2
          },
          data: deData
        }
      ]
    });

    window.addEventListener('resize', () => {
      landUseChartInstance.resize();
    });
  };

  const landStatusChartInit = async () => {
    const landStatusChartInstance = echarts.init(landStatusChart.value, 'macarons', {
      renderer: 'svg'
    });
    const res = await landUse();
    const deData = [...res.data.landLeaseDistributionVOList];
    deData.map((item : any) => {
      land_ease_status.value.map((item2 : any) => {
        if (item.name === item2.value) {
          item.name = item2.label;
        }
      });
    });
    landStatusChartInstance.setOption({
      tooltip: {
        title: '土地租赁',
        formatter: '{b}: {c} ㎡ ({d}%)'
      },
      legend: {
        itemHeight: 6,
        itemWidth: 6,
        orient: 'horizontal',
        top: 180,
        right: -3,
        icon: 'rect',
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      graphic: {
        type: 'text',
        left: 67,
        top: 'center',
        style: {
          text: '土地租赁',
          textAlign: 'center',
          fill: '#fff',
          fontSize: 12
        }
      },
      series: [
        {
          type: 'pie',
          radius: ['28%', '48%'],
          center: ['44%', '50%'],
          avoidLabelOverlap: false,
          label: pieChartLabelConfig,
          labelLine: {
            show: true,
            length: 4,
            length2: 4,
            smooth: 0.2
          },
          data: deData
        }
      ]
    });

    window.addEventListener('resize', () => {
      landStatusChartInstance.resize();
    });
  };

  const parkData = ref({
    area: 0,
    income: 0
  });
  const gridLineStyle = {
    splitLine: {
      show: false
    }
  };
  const yAxisGridLineStyle = {
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(211, 211, 211, 0.3)'
      }
    }
  };
  const parkCharttInit = async () => {
    const parkChartInstance = echarts.init(parkChart.value, 'macarons');
    const respon = await getRentalIncomeArea();

    parkData.value = respon.data.rentalIncomeArea;
    parkChartInstance.setOption({
      grid: {
        left: '0%', // 距离左侧的距离
        right: '0%', // 距离右侧的距离
        bottom: '0%', // 距离底部的距离
        top: '40%', // 距离顶部的距离
        containLabel: true // 包含标签
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: ['Evaporation', 'Precipitation', 'Temperature']
      },
      xAxis: [
        {
          ...gridLineStyle,
          type: 'category',
          data: respon.data.xaxis,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          ...yAxisGridLineStyle,
          type: 'value',
          name: '面积',
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          ...yAxisGridLineStyle,
          type: 'value',
          name: '出租率',
          max: 100,
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      series: [
        {
          name: '面积',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value;
            }
          },
          itemStyle: {
            color: '#017785'
          },
          data: respon.data.brokenLineBarChart.yaxis[0].columnarAxis
        },
        {
          name: '出租率',
          type: 'line',
          smooth: true,
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            }
          },
          itemStyle: {
            color: '#f59a23'
          },
          data: respon.data.brokenLineBarChart.yaxis[0].brokenLineAxis
        }
      ]
    });

    window.addEventListener('resize', () => {
      parkChartInstance.resize();
    });
  };

  const flatCharttInit = async () => {
    const flatChartInstance = echarts.init(flatChart.value, 'macarons');
    const response = await getApartmentRentalRate();

    flatChartInstance.setOption({
      grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        top: '20%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      xAxis: [
        {
          ...gridLineStyle,
          type: 'category',
          data: response.data.xaxis,
          axisPointer: {
            type: 'shadow'
          },
          splitLine: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          ...yAxisGridLineStyle,
          type: 'value',
          name: '面积',
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(211, 211, 211, 0.3)'
            }
          }
        },
        {
          ...yAxisGridLineStyle,
          type: 'value',
          name: '出租率',
          max: 100,
          axisLabel: {
            formatter: '{value} %'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(211, 211, 211, 0.3)'
            }
          }
        }
      ],
      series: [
        {
          name: '面积',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value;
            }
          },
          itemStyle: {
            color: '#ea891a'
          },
          data: response.data.yaxis[0].columnarAxis
        },
        {
          name: '出租率',
          type: 'line',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            }
          },
          itemStyle: {
            color: '#c30914'
          },
          data: response.data.yaxis[0].brokenLineAxis
        }
      ]
    });

    window.addEventListener('resize', () => {
      flatChartInstance.resize();
    });
  };

  const houseCharttInit = async () => {
    const houseChartInstance = echarts.init(houseChart.value, 'macarons');
    const response = await getPropertyRentalRate();

    houseChartInstance.setOption({
      grid: {
        left: '0%', // 距离左侧的距离
        right: '0%', // 距离右侧的距离
        bottom: '0%', // 距离底部的距离
        top: '20%', // 距离顶部的距离
        containLabel: true // 包含标签
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: ['Evaporation', 'Precipitation', 'Temperature']
      },
      xAxis: [
        {
          ...gridLineStyle,
          type: 'category',
          data: response.data.xaxis,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          ...yAxisGridLineStyle,
          type: 'value',
          name: '面积',
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          ...yAxisGridLineStyle,
          type: 'value',
          name: '出租率',
          max: 100,
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      series: [
        {
          name: '面积',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value;
            }
          },
          itemStyle: {
            color: '#00ffff'
          },
          data: response.data.yaxis[0].columnarAxis
        },
        {
          name: '出租率',
          type: 'line',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            }
          },
          itemStyle: {
            color: '#c30914'
          },
          data: response.data.yaxis[0].brokenLineAxis
        }
      ]
    });

    window.addEventListener('resize', () => {
      houseChartInstance.resize();
    });
  };

  const officeCharttInit = async () => {
    const officeChartInstance = echarts.init(officeChart.value, 'macarons');
    const response = await getOfficeRentalRate();

    officeChartInstance.setOption({
      grid: {
        left: '0%', // 距离左侧的距离
        right: '0%', // 距离右侧的距离
        bottom: '0%', // 距离底部的距离
        top: '20%', // 距离顶部的距离
        containLabel: true // 包含标签
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: ['Evaporation', 'Precipitation', 'Temperature']
      },
      xAxis: [
        {
          ...gridLineStyle,
          type: 'category',
          data: response.data.xaxis,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          ...yAxisGridLineStyle,
          type: 'value',
          name: '面积',
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          ...yAxisGridLineStyle,
          type: 'value',
          name: '出租率',
          max: 100,
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      series: [
        {
          name: '面积',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value;
            }
          },
          itemStyle: {
            color: '#ea891a'
          },
          data: response.data.yaxis[0].columnarAxis
        },
        {
          name: '出租率',
          type: 'line',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            }
          },
          itemStyle: {
            color: '#c30914'
          },
          data: response.data.yaxis[0].brokenLineAxis
        }
      ]
    });

    window.addEventListener('resize', () => {
      officeChartInstance.resize();
    });
  };

  const carCount = ref(0);
  const carRentChartInit = async () => {
    const carRentChartInstance = echarts.init(carRentChart.value, 'macarons', {
      renderer: 'svg'
    });
    const response = await rental();
    carCount.value = Number(response.data.carCountVO.carCount);
    carRentChartInstance.setOption({
      tooltip: {
        title: '汽车出租率',
        formatter: '{b}: {c} 辆 ({d}%)'
      },
      legend: {
        itemHeight: 6,
        itemWidth: 6,
        orient: 'horizontal', // 横向显示图例
        top: 180,
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      graphic: {
        type: 'text',
        left: 67,
        top: 'center',
        style: {
          text: `当前出租率 \n ${Number(response.data.carCountVO.rentRate)}%`,
          textAlign: 'center',
          fill: '#fff',
          fontSize: 12
        }
      },
      series: [
        {
          type: 'pie',
          radius: ['32%', '48%'],
          center: ['48%', '50%'],
          avoidLabelOverlap: false,
          label: pieChartLabelConfig,
          labelLine: {
            show: true,
            length: 4,
            length2: 4,
            smooth: 0.2
          },
          data: [
            { value: Number(response.data.carCountVO.rentedCount), name: '已出租' },
            { value: Number(response.data.carCountVO.carCount) - Number(response.data.carCountVO.rentedCount), name: '未出租' }
          ]
        }
      ]
    });

    window.addEventListener('resize', () => {
      carRentChartInstance.resize();
    });
  };

  const carBrandChartInit = async () => {
    const carBrandChartInstance = echarts.init(carBrandChart.value, 'macarons', {
      renderer: 'svg'
    });
    const response = await rental();
    carBrandChartInstance.setOption({
      tooltip: {
        text: '汽车品牌分布',
        formatter: '{b}: {c} 辆 ({d}%)'
      },
      legend: {
        itemHeight: 6,
        itemWidth: 6,
        type: 'scroll', // 设置图例为滚动类型
        orient: 'horizontal', // 横向显示图例
        top: 180,
        right: -3,
        icon: 'rect',
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      graphic: {
        type: 'text',
        left: 67,
        top: 'center',
        style: {
          text: '车辆品牌\n分布',
          textAlign: 'center',
          fill: '#fff',
          fontSize: 14
        }
      },
      series: [
        {
          type: 'pie',
          radius: ['32%', '48%'],
          center: ['48%', '50%'],
          avoidLabelOverlap: false,
          label: pieChartLabelConfig,
          labelLine: {
            show: true,
            length: 4,
            length2: 4,
            smooth: 0.2
          },
          data: response.data.brandDistributionVO
        }
      ]
    });

    window.addEventListener('resize', () => {
      carBrandChartInstance.resize();
    });
  };

  const lifeChartInit = () => {
    const lifeChartInstance = echarts.init(lifeChart.value, 'macarons');

    lifeChartInstance.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '0%',
        top: '34%',
        right: '0%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
      },
      series: [
        {
          name: '2011',
          type: 'bar',
          itemStyle: {
            color: '#ea891a'
          },
          data: [18203, 23489, 29034, 104970, 131744, 630230]
        }
      ]
    });

    window.addEventListener('resize', () => {
      lifeChartInstance.resize();
    });
  };
  const totalSupply = ref(null);
  const totalSales = ref(null);
  const plantCharttInit = async () => {
    const plantChartInstance = echarts.init(plantChart.value, 'macarons');
    const response = await mixtureConcreteMixingStation();

    plantChartInstance.setOption({
      grid: {
        left: '0%', // 距离左侧的距离
        right: '0%', // 距离右侧的距离
        bottom: '0%', // 距离底部的距离
        top: '40%', // 距离顶部的距离
        containLabel: true // 包含标签
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: ['Evaporation', 'Precipitation', 'Temperature']
      },
      xAxis: [
        {
          ...gridLineStyle,
          type: 'category',
          data: response.data.brokenLineBarFloatChart.xaxis,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          ...yAxisGridLineStyle,
          type: 'value',
          name: '营业额',
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          ...yAxisGridLineStyle,
          type: 'value',
          name: '供应量',
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      series: [
        {
          name: '营业额',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value;
            }
          },
          itemStyle: {
            color: '#ea891a'
          },
          data: response.data.brokenLineBarFloatChart.yaxis[0].columnarAxis
        },
        {
          name: '供应量',
          type: 'line',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            }
          },
          itemStyle: {
            color: '#c30914'
          },
          data: response.data.brokenLineBarFloatChart.yaxis[0].brokenLineAxis
        }
      ]
    });

    window.addEventListener('resize', () => {
      plantChartInstance.resize();
    });
  };

  const localDate = computed(() => {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    return year + '年' + month + '月' + day + '日';
  });

  const debounce = (func, wait) => {
    let timeout;
    return function (...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        func.apply(this, args);
      }, wait);
    };
  };

  const downloadWordReport = async () => {
    const chartsArr = [
      {
        name: ' 土地用途',
        value: landUseChart.value,
        range: 'A1:F20'
      },
      {
        name: ' 土地租赁状态',
        value: landStatusChart.value,
        range: 'A1:F20'
      },
      {
        name: ' 园区概览',
        value: parkChart.value,
        range: 'A1:J20'
      },
      {
        name: ' 公寓出租率概览',
        value: flatChart.value,
        range: 'A1:J20'
      },
      {
        name: '房产出租率概览',
        value: houseChart.value,
        range: 'A1:J20'
      },
      {
        name: '办公空间出租率概览',
        value: officeChart.value,
        range: 'A1:J20'
      },
      {
        name: '汽车运营出租率概览',
        value: carRentChart.value,
        range: 'A1:F20'
      },
      {
        name: ' 汽车品牌分布概览',
        value: carBrandChart.value,
        range: 'A1:F20'
      },
      {
        name: ' 惠生活概览',
        value: lifeChart.value,
        range: 'A1:J20'
      },
      {
        name: '混凝土搅拌站概览',
        value: plantChart.value,
        range: 'A1:J20'
      }
    ];

    let content = '<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body>';

    chartsArr.map((item) => {
      const chartData = echarts.getInstanceByDom(item.value); // 获取图表实例

      const base64Image = chartData.getDataURL({
        pixelRatio: 2, // 导出图片的分辨率比例，默认为1，即图片的分辨率为屏幕分辨率的一倍
        backgroundColor: '#000' // 导出图片的背景色
      });

      content += `
      <div style="margin: 0 auto;text-align: center">
        <img width="500" height="350" style="text-align: center;margin: 0 auto;" src="${base64Image}">
      </div>
      <p style="text-align:center;font-size: 14pt; line-height: 29pt;font-family: 'SimHei', serif;">图1 ${item.name}</p>
    `;
    });

    const canvas = await html2canvas(document.body);
    const img = canvas.toDataURL('image/png');

    content += `<div style="margin: 0 auto;text-align: center">
        <img width="600" height="400" style="text-align: center;margin: 0 auto;" src="${img}">
      </div>
      <p style="text-align:center;font-size: 14pt; line-height: 29pt;font-family: 'SimHei', serif;">可视化展板总览</p>
  `;

    content += '</body></html>';

    asBlob(content).then((blobData) => {
      saveAs.saveAs(blobData, `图表内容`);
    });
  };

  const downloadReport = () => {
    const chartsArr = [
      {
        name: ' 土地用途',
        value: landUseChart.value,
        range: 'A1:F20'
      },
      {
        name: ' 土地租赁状态',
        value: landStatusChart.value,
        range: 'A1:F20'
      },
      {
        name: ' 园区概览',
        value: parkChart.value,
        range: 'A1:J20'
      },
      {
        name: ' 公寓出租率概览',
        value: flatChart.value,
        range: 'A1:J20'
      },
      {
        name: '房产出租率概览',
        value: houseChart.value,
        range: 'A1:J20'
      },
      {
        name: '办公空间出租率概览',
        value: officeChart.value,
        range: 'A1:J20'
      },
      {
        name: '汽车运营出租率概览',
        value: carRentChart.value,
        range: 'A1:F20'
      },
      {
        name: ' 汽车品牌分布概览',
        value: carBrandChart.value,
        range: 'A1:F20'
      },
      {
        name: ' 惠生活概览',
        value: lifeChart.value,
        range: 'A1:J20'
      },
      {
        name: '混凝土搅拌站概览',
        value: plantChart.value,
        range: 'A1:J20'
      }
    ];

    const workbook = new ExcelJS.Workbook(); // 创建工作簿

    chartsArr.map((item) => {
      const worksheet = workbook.addWorksheet(item.name); // 添加工作表

      const chartData = echarts.getInstanceByDom(item.value); // 获取图表实例

      const base64Image = chartData.getDataURL({
        pixelRatio: 2, // 导出图片的分辨率比例，默认为1，即图片的分辨率为屏幕分辨率的一倍
        backgroundColor: '#000' // 导出图片的背景色
      });

      let image = workbook.addImage({
        // 添加图片
        base64: base64Image, // 图片的base64编码
        extension: 'png' // 图片的扩展名
      });

      worksheet.addImage(image, item.range); // 将图片添加到工作表中
    });

    workbook.xlsx.writeBuffer().then(function (buffer) {
      // 生成excel文件的二进制数据
      saveAs.saveAs(
        new Blob([buffer], {
          // 生成Blob对象
          type: 'application/octet-stream' // 指定文件的MIME类型
        }),
        'xchart.xlsx'
      ); // 指定文件名
    });
  };

  const loading = ref(true);
  // 使用节流函数
  const handleScroll = debounce(() => {
    window.location.reload();
  }, 500);
  onMounted(() => {
    updateScale();
    loading.value = true;
    window.addEventListener('resize', () => {
      handleScroll();
    });
    setTimeout(() => {
      landUseChartInit();
      landStatusChartInit();
      carRentChartInit();
      carBrandChartInit();
      parkCharttInit();
      flatCharttInit();
      houseCharttInit();
      officeCharttInit();
      lifeChartInit();
      plantCharttInit();
      asseetOvervie();
      loading.value = false;
    }, 500);
  });
</script>

<style lang="scss">
  canvas {
    width: 100%;
    height: 100%;
  }

  body,
  html {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  p {
    margin: 0;
    padding: 0;
  }

  .highlight {
    color: #ffab3e;
    font-size: 24px;
  }

  .analysis-presentation {
    color: white;
    width: 100%;
    height: 100%;
    background-image: url('@/assets/images/u6862.png');
    background-size: 100% 100%;
    background-size: not-repeat;
  }

  .chart {
    margin-bottom: 4%;
    background-image: url('@/assets/images/u6866.png');
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .chart-label {
      padding-left: 4%;
      padding-top: 1.4%;
      font-size: 1.2rem;
    }

    .chart-container {
      padding: 1vw;
      bacground-color: ring-cyan;
      height: 100%;
      position: relative;

      .chart-title {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        position: absolute;
        top: 10%;
      }

      .chart-content {
        width: 100%;
        height: 82%;
      }
    }
  }

  canvas {
    height: 237px !important;
  }

  .dbg-chart {
    position: relative;
    flex: 3;
    color: white;
    width: 100%;
    height: 100%;
    margin-bottom: 8%;
    background-image: url('@/assets/images/dbg2.png');
    background-size: 100% 100%;
    line-height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    .dbg-date {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -36px;
      text-align: center;
      line-height: 30px;
      width: 100%;
      font-size: 10px;
    }

    .dbg-chart-item {
      font-size: 13px;
      position: absolute;
      top: 18%;
      left: 42%;
      text-align: center;
      width: 15%;
    }

    .dbg-chart-item1 {
      font-size: 13px;
      position: absolute;
      top: 26%;
      left: 21%;
      text-align: center;
      width: 15%;
    }

    .dbg-chart-item2 {
      font-size: 13px;
      position: absolute;
      top: 54%;
      left: 24%;
      text-align: center;
      width: 15%;
    }

    .dbg-chart-item3 {
      font-size: 13px;
      position: absolute;
      top: 60%;
      left: 42%;
      text-align: center;
      width: 15%;
    }

    .dbg-chart-item4 {
      font-size: 13px;
      position: absolute;
      top: 53%;
      left: 59%;
      text-align: center;
      width: 15%;
    }

    .dbg-chart-item5 {
      font-size: 13px;
      position: absolute;
      width: 15%;
      top: 31%;
      left: 63%;
      text-align: center;
    }

    .dbg-text {
      font-size: 18px;
      font-weight: bold;
    }
  }
</style>
